<template>
  <el-col class="col">
    <el-menu default-active="0" class="el-menu-vertical-demo">
      <el-menu-item
        v-for="(data, i) in chooseData"
        :key="i"
        @click="handleClick(data)"
        :index="`${i}`"
      >
        <span>{{ data.title }}</span>
      </el-menu-item>
    </el-menu>
  </el-col>
</template>

<script>
export default {
  props: {
    chooseData: {
      required: true,
    },
  },
  methods: {
    handleClick(data) {
      this.$emit("componentChange", data.component);
    },
  },
};
</script>

<style lang ="scss" scoped>
.col {
    width: 150px;
    flex: 0 0 auto;
}
</style>
